<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>index</title>

    <!--Favicon -->
    <link rel="icon" href="favicon.ico" type="image/x-icon"/>

    <!--Bootstrap.min css-->
    <link rel="stylesheet" href="css/bootstrap.min.css">

</head>

<body>

<div id="signup" class="container" style="padding-top:100px">
    <div class="row clearfix">
        <div class="col-md-4 column">
        </div>
        <div class="col-md-4 column">
            <label>用户名</label>
        </div>
        <div class="col-md-4 column">
        </div>
    </div>
    <div class="row clearfix">
        <div class="col-md-4 column">
        </div>
        <div class="col-md-4 column">
            <input v-model="Username" placeholder="请输入用户名" v-on:blur="userchanged" >
        </div>
        <div class="col-md-4 column">
        </div>
    </div>
    <div v-if="UserError" class="row clearfix">
        <div class="col-md-4 column">
        </div>
        <div class="col-md-4 column">
            <label>{{UserError}}</label>
        </div>
        <div class="col-md-4 column">
        </div>
    </div>
    <div class="row clearfix">
        <div class="col-md-4 column">
        </div>
        <div class="col-md-4 column">
            <label>昵称</label>
        </div>
        <div class="col-md-4 column">
        </div>
    </div>
    <div class="row clearfix">
        <div class="col-md-4 column">
        </div>
        <div class="col-md-4 column">
            <input v-model="Nickname" placeholder="请输入昵称">
        </div>
        <div class="col-md-4 column">
        </div>
    </div>
    <div class="row clearfix">
        <div class="col-md-4 column">
        </div>
        <div class="col-md-4 column">
            <label>密码</label>
        </div>
        <div class="col-md-4 column">
        </div>
    </div>
    <div class="row clearfix">
        <div class="col-md-4 column">
        </div>
        <div class="col-md-4 column">
            <input type="password" name="password" v-model="Pwd1" placeholder="请输入密码" v-on:blur="pwd1changed" >
        </div>
        <div class="col-md-4 column">
        </div>
    </div>
    <div v-if="PwdError1" class="row clearfix">
        <div class="col-md-4 column">
        </div>
        <div class="col-md-4 column">
            <label>{{PwdError1}}</label>
        </div>
        <div class="col-md-4 column">
        </div>
    </div>
    <div class="row clearfix">
        <div class="col-md-4 column">
        </div>
        <div class="col-md-4 column">
            <label>确认密码</label>
        </div>
        <div class="col-md-4 column">
        </div>
    </div>
    <div class="row clearfix">
        <div class="col-md-4 column">
        </div>
        <div class="col-md-4 column">
            <input type="password" name="password" v-model="Pwd2" placeholder="请确认密码" v-on:blur="pwd2changed" >
        </div>
        <div class="col-md-4 column">
        </div>
    </div>
    <div v-if="PwdError2" class="row clearfix">
        <div class="col-md-4 column">
        </div>
        <div class="col-md-4 column">
            <label>{{PwdError2}}</label>
        </div>
        <div class="col-md-4 column">
        </div>
    </div>
    <div class="row clearfix">
        <div class="col-md-4 column">
        </div>
        <div class="col-md-4 column">
            <a class="btn btn-primary btn-block" href="#" v-on:click="signup">signup</a>
        </div>
        <div class="col-md-4 column">
        </div>
    </div>
</div>

<!--Jquery.min js-->
<script src="js/jquery.min.js"></script>


<!--Bootstrap.min js-->
<script src="js/bootstrap.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="js/webchat.js"></script>
<script>
    var g_usr;


			var g_svr="http://localhost:8083"
			var User={
				Username:"",
				Nickname:"",
				Pwd1:"",
				Pwd2:"",
				UserError:"",
				PwdError1:"",
				PwdError2:"",
			}
	var g_usrok = false;
	var g_pwdok = false;
     function valiUser(){
        webchat.valiUser(User.Username,function(v){
            g_usrok = v;
            if(!v){

            }
        });
     }
     function valiPwd(){

     }
			new Vue({
				el: '#signup',
				data: User,
				methods:{
					signup:function () {
                        if(User.Username.trim()!=""&&User.Pwd1!=""&&
                            User.UserError==""&& User.PwdError1==""&&  User.PwdError2==""){
						    webchat.signup(User.Username.trim(),User.Nickname.trim(),User.Pwd1,function(r){
						        if(r){
						            alert("注册成功");
						            window.location.href = '/login.html';
						        }
						    });
						}else{
						    alert("信息填写错误");
						}
					},
					userchanged:function(){
					    if(User.Username.trim()==""){
					        User.UserError="用户名不能为空";
					        return;
					    }
					    webchat.exist(User.Username.trim(),function(r){
                            if(r){
                                User.UserError="用户"+User.Username.trim()+"已存在";
                            }else{
                                User.UserError="";
                            }
					    });
					},
					pwd2changed:function(){
					    if(User.Pwd2!=User.Pwd1){
					        User.PwdError2="密码不相等";

					    }else{
					        User.PwdError2="";
					    }
					},
					pwd1changed:function(){
					    if(User.Pwd1==""){
					        User.PwdError1="密码不能为空";
					    }else{
					        User.PwdError1="";
					    }
					    if(User.Pwd2!=User.Pwd1){
					        User.PwdError2="密码不相等";

					    }else{
					        User.PwdError2="";
					    }
					},
				}
				});


</script>


</body>
</html>